BEM（Block Element Modifier） 是一種 CSS 命名規則，用於構建可維護且可重用的代碼結構。將 SCSS 與 BEM 結合，可以有效組織樣式、提高可讀性並減少命名衝突。以下將介紹如何將 SCSS 與 BEM 結合使用，並展示如何優化代碼結構。

一、BEM 基本概念

Block：代表一個獨立的組件，例如 .button 或 .card。
Element：Block 的子部分，由雙下劃線 __ 連接，例如 .button__icon。
Modifier：修飾 Block 或 Element 的變化，由雙連字符 -- 連接，例如 .button--primary。

二、SCSS 與 BEM 結合的技巧

1. 基本結構與範例

假設我們有一個按鈕的 Block，它有一個圖標（Element），並有多種樣式（Modifier）。使用 SCSS 與 BEM，可以這樣撰寫：

// 按鈕 Block
.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  cursor: pointer;
  
  &--primary {
    background-color: #3498db; // 主色
  }
  
  &--secondary {
    background-color: #2ecc71; // 次色
  }

  &--disabled {
    background-color: #95a5a6;
    cursor: not-allowed;//不可點擊符號
    opacity: 0.6;
  }
  
  // 按鈕的圖標 Element
  &__icon {
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

2. 使用 @mixin 混入 BEM 模式

透過 SCSS 的 @mixin，可以將 Block、Element 與 Modifier 組織起來，讓樣式更具一致性且容易維護。

// 定義 BEM 結構的 Mixin
@mixin button-styles($background-color, $text-color) {
  background-color: $background-color;
  color: $text-color;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

// 使用 Mixin
.button {
  @include button-styles(#3498db, #fff); // 預設樣式

  &--primary {
    @include button-styles(#3498db, #fff);
  }

  &--secondary {
    @include button-styles(#2ecc71, #fff);
  }

  &--disabled {
    @include button-styles(#95a5a6, #fff);
    cursor: not-allowed;
    opacity: 0.6;
  }

  &__icon {
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

三、代碼結構優化的優點

1.可維護性：BEM 的命名規則與 SCSS 結合，讓樣式層次清晰，易於維護。
2.可重用性：使用 @mixin、@extend 等特性，可以有效重用樣式，減少重複代碼。
3.模組化：將不同 Block 分開管理，避免命名衝突，提升代碼組織性。

前面練習時也使用過這些技巧，只是現在我們知道這些功能的名稱了!也算是複習先前內容